<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <script>
        $(function () {
            $("button:eq(0)").click(function () {
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            })
            $("button:eq(1)").click(function () {
                $("select:eq(0) option").appendTo($("select:eq(1)"));
            })
            $("button:eq(2)").click(function () {
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
            })
            $("button:eq(3)").click(function () {
                $("select:eq(1) option").appendTo($("select:eq(0)"));
            })
        })
    </script>
</head>
        <style>
            select{
                width: 100px;
                height: 140px;
            }
            div{
                width: 130px;
                float: left;
                text-align: center;
            }
        </style>
<body>
        <div id="left">
            <select multiple="multiple" name="sel01">
                <option value="opt01">选项1</option>
                <option value="opt02">选项2</option>
                <option value="opt03">选项3</option>
                <option value="opt04">选项4</option>
                <option value="opt05">选项5</option>
                <option value="opt06">选项6</option>
                <option value="opt07">选项7</option>
                <option value="opt08">选项8</option>
            </select>
            <button>选中添加到右边</button>
            <button>全部添加到右边</button>
        </div>
        <div id="right">
            <select multiple="multiple" name="sel02">

            </select>
            <button>选中删除到左边</button>
            <button>全部删除到左边</button>
        </div>

</body>
</html>